<template>
	<view class="ALL">
		<image :src="bg" mode=""></image>
		<view class="box">
			<view class="top">
				<text>企业信息</text>
			</view>
			<view class="mid">
				<view class="mid-section">
					<!-- <text>企业名称</text> -->
					<input type="text" value="" @input="companyName" placeholder="请输入企业名称" />
				</view>
				<view class="mid-section">
					<!-- <text>企业法人</text> -->
					<input type="text" value="" @input="companyMan" placeholder="请输入企业法人" />
				</view>
				<view class="mid-section">
					<!-- <text>身份证号</text> -->
					<input type="text" value="" @input="idCard" placeholder="请输入身份证号" />
				</view>
				<view class="mid-section">
					<!-- <text>行业分类</text> -->
					<input type="text" value="" @input="Type" placeholder="请输入行业分类" />
				</view>
				<view class="mid-section">
					<!-- <text>企业邮箱</text> -->
					<input type="text" value="" @input="companyEmil" placeholder="请输入企业邮箱" />
				</view>
				<view class="mid-section">
					<!-- <text>企业负责人</text> -->
					<input type="text" value="" @input="Companyprincipal" placeholder="请输入企业负责人" />
				</view>
				<view class="mid-section1">
					<text>营业执照</text>
					<view class="content">
						<!--上传图片-->
						<image v-for="item in businessLicense" :src='item' @click="preview(item)"></image>
						<!-- <view v-if="isshow" class="upimg" type="primary" @click="chosseImg"> -->
						<view v-if="isshow" class="upimg" type="primary" @click="uploadImage">
							<image :src="iconadd" mode=""></image>
						</view>
						<!-- 显示上传的图片 -->

					</view>
				</view>
			</view>
			<view class="point">
				<label class="radio">
					<radio color="#B6914E" value="" @click="Check" :checked="check" /><text class="aggre">我已阅读并同意</text><text @tap="agreement" class="services">《服务协议》</text>
				</label>
			</view>
			<view class="ensure" @tap="submit">
			<!-- <view class="ensure" @tap="getUrl"> -->
				<text>提交申请</text>
			</view>
		</view>

	</view>
</template>

<script>
	import apis from '../../api.js'
	import chooseAndUploadImage from '@/js_sdk/tencentcloud-plugin-cos/choose-and-upload-image.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	import icons from "../../common/icons.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				check: true,
				userEntity: {
					enterpriseName: '',
					enterpriseLegalPerson: '',
					userIdCard: '',
					enterpriseType: '',
					enterpriseMailbox: '',
					enterpriseLeader: '',
					userPhone: '',
					userName: '',
					userMailbox: '',
					userPassword: '',
					sincerityUnion: '是'
				},
				img_url: {},
				businessLicense: [],
				isshow: true,
				fileName: null,
				fileUrl: null,
				bg:icons.icons.bg,
				iconadd:icons.icons.iconadd,
			}
		},
		onLoad(option) {
			console.log(option)
			this.userEntity.userPhone = option.userPhone
			this.userEntity.userName = option.userName
			this.userEntity.userMailbox = option.userMailbox
			this.userEntity.userPassword = option.userPassword
			console.log(this.imgurl)
		},
		computed: {
			...mapState(['imgurl'])
		},
		methods: {
			Check() {
				this.check = !this.check
			},
			// agreement(){

			// },
			companyName(e) {
				console.log(e.detail.value)
				this.userEntity.enterpriseName = e.detail.value
			},
			companyMan(e) {
				console.log(e.detail.value)
				this.userEntity.enterpriseLegalPerson = e.detail.value
			},
			idCard(e) {
				console.log(e.detail.value)
				this.userEntity.userIdCard = e.detail.value
			},
			Type(e) {
				console.log(e.detail.value)
				this.userEntity.enterpriseType = e.detail.value
			},
			companyEmil(e) {
				console.log(e.detail.value)
				this.userEntity.enterpriseMailbox = e.detail.value
			},
			Companyprincipal(e) {
				console.log(e.detail.value)
				this.userEntity.enterpriseLeader = e.detail.value
			},
			submit() {
				console.log(this.userEntity)
				apis.validationEmail({
					email: this.userEntity.userMailbox
				}).then(res => {
					console.log(res)
					if (res[1].data.code == 200) {
						apis.validationEmail({
							email: this.userEntity.enterpriseMailbox
						}).then(res => {
							console.log(res)
							if (res[1].data.code == 200) {
								apis.validationPhone({
									phone: this.userEntity.userPhone
								}).then(res => {
									console.log(res)
									if (res[1].data.code == 200) {
										apis.register({
											"businessLicense":this.businessLicense,
											"enterpriseName": this.userEntity.enterpriseName,
											"enterpriseLegalPerson": this.userEntity.enterpriseLegalPerson,
											"userIdCard": this.userEntity.userIdCard,
											"enterpriseType": this.userEntity.enterpriseType,
											"enterpriseMailbox": this.userEntity.enterpriseMailbox,
											"enterpriseLeader": this.userEntity.enterpriseLeader,
											"userPhone": this.userEntity.userPhone,
											"userName": this.userEntity.userName,
											"userMailbox": this.userEntity.userMailbox,
											"userPassword": this.userEntity.userPassword,
											"sincerityUnion": this.userEntity.sincerityUnion
										}).then(res => {
											console.log(res)
											if (res[1].data.code == 200) {
												uni.reLaunch({
												    url: '../login/login'
												});
												// console.log(this.businessLicense)
												// var that = this
												
												// uni.uploadFile({
												// 	url: res[1].data.url,
												// 	filePath: that.businessLicense[0],
												// 	name: 'file',
												// 	header:{
												// 		'Content-Type':'multipart/form-data'
												// 	},
												// 	fileType:'image',
												// 	formData:{
												// 		'Key':'VehicleLicense/' + that.businessLicense[0]
												// 	},
												// 	success: (uploadFileRes) => {
												// 		console.log(uploadFileRes);
												// 	},
												// 	fail: function(res) {
												// 		console.log(res)
												// 	}
												// });
											}
										})
									}
								})
							}
						})
					}
				})

			},
			chosseImg() {
				var that = this
				uni.chooseImage({
					count: 2, //限制图片上传的数量,做多9张
					success: res => { //上传成功的回调
						console.log(res)
						this.img_url=res.tempFilePaths.toString() //返回的图片路径
						this.emptyShow = false;
						console.log(this.img_url)
						that.businessLicense.push(this.img_url)
						that.fileName=this.img_url
						// console.log(that.businessLicense)
						// that.isshow = false
						console.log(that.businessLicense.length)
						if(that.businessLicense.length>1){
							that.isshow = false
						}
					}
				});
			},
			
			/*上传成功预览图片*/
			preview(index) {
				
				uni.previewImage({
					current: index, //当前点击预览的图片
					urls: this.img_url //预览图片的链接
				})
			},
			
			async uploadImage() {
				var that=this
			  this.fileName = null;
			  this.fileUrl = null;
			  try {
			    const key = await chooseAndUploadImage(); // 选择并上传图片
			    this.fileName = key;
				console.log(this.fileName)
				this.img_url=this.imgurl+this.fileName //返回的图片路径
				this.emptyShow = false;
				console.log(this.img_url)
				that.businessLicense.push(this.img_url)
				// console.log(that.businessLicense)
				// that.isshow = false
				console.log(that.businessLicense.length)
				if(that.businessLicense.length>1){
					that.isshow = false
				}
			  } catch (error) {
				  console.log(error)
			    uni.showToast({
			      icon: 'none',
			      title: error.message
			    });
			  }
			},
			// async getUrl() {
			//   uni.showLoading({
			//     mask: true
			//   });
			//   try {
			//     const url = await getFileAccessUrl(this.fileName);
			//     this.fileUrl = url;
			// 	console.log(this.fileUrl)
			//     uni.hideLoading();
			//   } catch (error) {
			//     uni.showToast({
			//       icon: 'none',
			//       title: error.message
			//     });
			//   }
			// }
		}
	}
</script>

<style scoped>
	.ALL {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.ALL>image {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		z-index: -1;
	}

	.box {
		width: 686rpx;
		height: 1348rpx;
		margin-top: 40rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}

	.top {
		width: 100%;
		margin-top: 60rpx;
		text-align: center;
	}

	.top>text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 1000;
		color: #212121;
	}

	.mid-section {
		width: 624rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #E6E9EE;
	}

	.mid-section>input {
		margin-top: 40rpx;
	}

	.ensure {
		width: 624rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 12rpx;
		color: #B6914E;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 1000;
		margin-top: 48rpx;
	}

	.mid-section1 {
		padding-top: 48rpx;
		width: 624rpx;
		height: 160rpx;
		display: flex;
		align-items: flex-start;
	}

	.mid-section1>text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.upimg>image {
		width: 160rpx;
		height: 160rpx;
	}

	.content {
		display: flex;
		padding-left: 26rpx;
	}

	.content>image {
		width: 160rpx;
		height: 160rpx;
	}

	.point {
		width: 624rpx;
		display: flex;
		margin-top: 48rpx;
	}

	.aggre {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.services{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B6914E;
	}
</style>
